@import '../base/var.styl'

.header
  position: relative
  background: #fff
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1)
  z-index: 100
  .center
    display: flex
    justify-content: space-between
    align-items: center
    width: $center-w
    margin: 0 auto
    .logo
      .logo-img
        width: 258px
    .nav
      display: flex
      align-items: center
      .nav-item
        width: 100px
        font-size: 16px
        color: #4c4c4c
        text-align: center
        line-height: 100px
        position: relative
        cursor: pointer
        &:hover, &.active
          color: #fff
          background-image: linear-gradient(to bottom, #d65c5c, #b02323)
        &:hover
          .sub-nav
            visibility: visible
            opacity: 1
            transform: translateY(10px) 
        .sub-nav
          position: absolute
          left: 0
          top: 100%
          padding: 12px 0
          background: rgba(255, 255, 255, 0.8)
          visibility: hidden
          opacity: 0
          transition: 300ms 
          &::before
            content: ''
            position: absolute
            left: 0
            top: -10px
            width: 100%
            height: 10px
          .link
            display: block
            width: 155px
            color: #4c4c4c
            line-height: 50px
            text-align: left
            padding-left: 20px
            &:hover, &.active
              color: $c-theme
              background-color: rgba(176, 35, 35, 0.5)
              background-image: linear-gradient(to bottom, currentColor, currentColor)
              background-size: 3px 100%
              background-repeat: no-repeat